<template>
  <section class="card">
    <h2>🗂️ 文字-画格映射确认</h2>
    <table>
      <thead><tr><th>格#</th><th>文本段落</th><th>镜头/角度</th></tr></thead>
      <tbody>
        <tr v-for="(p,idx) in panels" :key="p.id">
          <td>{{ idx+1 }}</td>
          <td>{{ (p.sourceParagraphIds||[]).join(',') }}</td>
          <td>{{ p.shot }}/{{ p.angle }}</td>
        </tr>
      </tbody>
    </table>
    <div class="row">
      <label class="muted">预设风格：</label>
      <select v-model="style">
        <option>日式漫画</option>
        <option>美式漫画</option>
        <option>卡通风格</option>
      </select>
      <span class="muted">{{ hint }}</span>
      <button class="btn" style="margin-left:auto" @click="generate">生成</button>
    </div>
  </section>
</template>
<script setup>
import axios from 'axios';
import { ref, computed } from 'vue';
import { useRouter } from 'vue-router';
import { useStore } from '../stores/useStore';
const store = useStore();
const router = useRouter();
const panels = computed(()=>store.panels);
const style = ref(store.stylePreset);
const hint = ref('待生成');
async function generate(){
  hint.value = '生成中…';
  try{
    const { data } = await axios.post(store.baseUrl + '/api/generate', { stylePreset: style.value, panels: store.panels });
    store.setImages((data?.data?.images)||[]);
    hint.value = data.mock ? '完成（MOCK）' : '完成';
    router.push('/result');
  }catch(e){ hint.value = '失败：' + (e?.message||''); }
}
</script>
<style>
.card{border:1px solid #e6e6eb;border-radius:20px;padding:14px;background:#fff;margin-bottom:12px;box-shadow:0 12px 30px rgba(45,17,83,.06)}
.row{display:flex;gap:10px;align-items:center;margin-top:8px}
.btn{background:#7c3aed;color:#fff;border:0;padding:8px 12px;border-radius:10px;cursor:pointer}
.muted{color:#6e6e73;font-size:12px}
select{padding:6px 8px;border:1px solid #e6e6eb;border-radius:10px;background:#fff}
table{width:100%;border-collapse:collapse}
th,td{border-bottom:1px solid #e6e6eb;padding:8px 6px;text-align:left}
</style>
